<template>
  <div>
    <!-- <Top>

</Top>
<Mid></Mid> -->

    <!-- 头部图片登录区 S-->
    <div class="head">
      <!-- 图片 -->
      <img src="http://liufusong.top:8080/img/profile/bg.png" alt="">
      <div class="pic">
        
      </div>
      <!-- 登录卡片 -->
      <div class="login">
        <!-- 登录角色 -->
        <p>游客</p>
        <!-- 登录按钮 -->
        <van-button type="info" router to="/login" class="loginbutton"
          >去登录</van-button
        >
        <!-- 登录头像 -->
        <div class="LoginProfilePicture">
          <img src="http://liufusong.top:8080/img/profile/avatar.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 头部图片区 E-->

    <!-- 个人选项 S-->
    <div class="PersonalOptions">
      <div class="PersonalOptions-item" @click="$router.push('/collect')">
        <!-- 小图标 -->
        <div class="iconfont icon-shoucang"></div>
        <!-- 文字 -->
        <p>我的收藏</p>
      </div>
      <div class="PersonalOptions-item">
        <!-- 小图标 -->
        <div class="iconfont icon-home"></div>
        <!-- 文字 -->
        <p>我的出租</p>
      </div>
      <div class="PersonalOptions-item">
        <!-- 小图标 -->
        <div class="iconfont icon-jilu"></div>
        <!-- 文字 -->
        <p>看房记录</p>
      </div>
      <div class="PersonalOptions-item">
        <!-- 小图标 -->
        <div class="iconfont icon-shenfenxuanze"></div>
        <!-- 文字 -->
        <p>成功房主</p>
      </div>
      <div class="PersonalOptions-item">
        <!-- 小图标 -->
        <div class="iconfont icon-geren"></div>
        <!-- 文字 -->
        <p>个人资料</p>
      </div>
      <div class="PersonalOptions-item">
        <!-- 小图标 -->
        <div class="iconfont icon-lianxiwomen"></div>
        <!-- 文字 -->
        <p>联系我们</p>
      </div>
      
    </div>

    <!-- 个人选项 E-->
    <!-- 大图片 S-->
    <div class="banner">
      <img src="http://liufusong.top:8080/img/profile/join.png" alt="">
    </div>
    <!-- 大图片 E-->
  </div>
</template>

<script>
import request from '@/utils/requset'
// import Top  from '@/views/my-top'
// import Mid  from '@/views/my-mid.vue'
export default {
  components: {
    // Top,
    // Mid
  },
  name: 'register-page',
  data() {
    return {}
  },
  methods: {},
 async created() {
request({
  
})
  },

}
</script>

<style lang="less" scoped>


//头部图片登录区
.head {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #fff;
  img{
    // position: absolute;
    
    width: 100%;
    
  }
  //登录卡片
  .login {
    position: absolute;
    top: 40%;
    left: 8%;
    width: 84%;
    height: 160px;
    background-color: #ffffff;
    margin: -10px auto 4px;
    text-align: center;
    border-radius: 3px;
    box-shadow: 0 0 5px #eaeaea;
    p {
      margin-top: 65px;
    }
    .loginbutton {
      margin-top: 5px;
      background-color: #21b97a;
      border-radius: 4px;
      border: none;
      height: 35px;
      width: 80px;
    }
  }
  //头像
  .LoginProfilePicture {
    position: absolute;
    top: -40px;
    left: 114px;

    width: 80px;
    height: 80px;
    background-color: pink;
    border-radius: 50%;
    border: #f5f5f5 solid 6px;
    img{
      width: 100%;
      height: 100%;
    }
  }
}

// 个人选项
.PersonalOptions {
  margin-top: 10px;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  .PersonalOptions-item {
    flex: 30%;
    width: 50px;
    height: 80px;
    background-color: #fff;
    text-align: center;
    p {
      font-size: 14px;
    }
    .iconfont{
      font-size: 20px;
    }
  }
}
//底部大图片
.banner{
  padding: 0 12px;
  img{
margin-top: 4px;
    width: 100%;
    height: 100%;
  }
}
</style>
